<template>
    <div>
        <el-row>
            <el-col span="4" offset="8">
                <el-input v-model="queryList.productName"></el-input>
            </el-col>
            <el-col span="2">
                <el-button type="primary" @click="selByLike" icon="el-icon-search">查询</el-button>
            </el-col>
            <el-row>
                <el-col span="4" :offset="1">
                    <el-button type="success" @click="exportExcel">数据导出</el-button>
                </el-col>
                <el-col span="4">
                    <el-upload class="clearfix" action="http://localhost:8080/products/importExcel" name="file"
                        :on-progress="onExcelProgress" :on-success="handleExcelSuccess"
                        accept=".csv, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
                        multiple :limit="1" :headers="upload.headerObj">
                        <el-button type="primary">数据导入</el-button>
                    </el-upload>
                </el-col>
            </el-row>
            <el-table :data="productList" style="width: 100%;margin: auto" :row-class-name="tableRowClassName"
                header-align="center">
                <el-table-column prop="productId" label="产品编号" align="center">
                </el-table-column>
                <el-table-column prop="productName" label="产品名称" align="center">
                </el-table-column>
                <el-table-column prop="productType" label="产品类型" align="center">
                </el-table-column>
                <el-table-column prop="productLoanAmount" label="贷款额度" align="center">
                </el-table-column>
                <el-table-column prop="productRate" label="贷款利率" align="center">
                </el-table-column>
                <el-table-column prop="loanTime" label="贷款期限" align="center">
                </el-table-column>
                <el-table-column prop="productLoanAmount" label="产品介绍" align="center">
                </el-table-column>
                <el-table-column prop="productState" label="产品状态" align="center">
                    <template slot-scope="scope">
                        <p v-if="scope.row.productState == '1'">已发布</p>
                        <p v-if="scope.row.productState == '2'">未发布</p>
                        <p v-if="scope.row.productState == '3'">注销</p>
                    </template>
                </el-table-column>
                <el-table-column prop="productAudit" label="审核状态" align="center">
                    <template slot-scope="scope">
                        <p v-if="scope.row.productAudit == '1'">待审核</p>
                        <p v-if="scope.row.productAudit == '2'">已通过审核</p>
                        <p v-if="scope.row.productAudit == '3'">未通过审核</p>
                    </template>
                </el-table-column>
                <el-table-column label="查看模板" width="100" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" icon="el-icon-view"
                            @click="selTemplate(scope.row.productId)"></el-button>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="280" align="center">
                    <template slot-scope="scope">
                        <el-button type="success" size="mini" icon="el-icon-check"
                            @click="handleEdit(scope.row.productId, scope.row.productAudit)"></el-button>
                        <el-button type="danger" size="mini" icon="el-icon-close"
                            @click="deleteEdit(scope.row.productId, scope.row.productAudit)"></el-button>
                    </template>
                </el-table-column>
            </el-table>

            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page="queryList.currentPage" :page-sizes="page.pageSizes" :page-size="queryList.pageSize"
                layout="total, sizes, prev, pager, next, jumper" :total="page.total">
            </el-pagination>


            <el-dialog title="产品审核意见" :visible.sync="dialog.updateshow" width="30%">
                <el-form :model="form">
                    <el-input type="hidden" v-model="updateC.productId"></el-input>
                    <el-input type="hidden" v-model="updateC.productAudit"></el-input>
                    <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="updateC.auditDescription">
                    </el-input>

                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialog.updateshow = false">取 消</el-button>
                    <el-button type="primary" @click="updateCC">提 交</el-button>
                </div>
            </el-dialog>

            <el-dialog title="修改合同模板" :visible.sync="dialog2.updateshow2" width="30%">
                <el-form :model="form">
                    <el-input type="hidden" v-model="updateT.contractTemplateId"></el-input>
                    <el-input type="textarea" :rows="6" placeholder="请输入内容" v-model="updateT.contractTemplateContent">
                    </el-input>
                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialog2.updateshow2 = false">取 消</el-button>
                    <el-button type="primary" @click="updateTemplate">提 交</el-button>
                </div>
            </el-dialog>
        </el-row>

    </div>
</template>

<script>
export default {
    data() {
        return {
            upload: {
                headerObj: {
                    //Spring security时需要传递token，否则不需要该配置
                    Authorization: sessionStorage.getItem("authorization"),
                },
            },
            page: {
                pageSizes: [5, 10, 20, 50, 100], //下拉列表中的数组
                total: 0, //一共有多少条数据
            },
            queryList: {
                currentPage: 1, //代表当前页
                pageSize: 5, //代表每页显示多少条数据
                productName: "",
            },
            productList: {},
            selLike: {},
            dialog: {
                updateshow: false,
            },
            dialog2: {
                updateshow2: false,
            },
            updateC: {},
            updateT: {}
        };
    },
    methods: {
        handleExcelSuccess(res, result) {
            this.$message.success("导入成功");
            if (result.response.success) {
                this.loadProduct();
            }
        },
        onExcelProgress() { },
        exportExcel() {
            this.$axios
                .post("products/exportExcel", this.queryList, { responseType: 'blob' })
                .then((res) => {
                    let fileName = res.headers["content-disposition"].split("=")[1];//得到后端生成的文件名          
                    let url = window.URL.createObjectURL(new Blob([res.data]));
                    let dom = document.createElement("a");
                    dom.style.display = "none";
                    dom.href = url;
                    dom.setAttribute("download", fileName); //指定下载后的文件名，防跳转
                    document.body.appendChild(dom);
                    dom.click();
                    // 释放内存
                    dom.parentNode.removeChild(dom)
                    window.URL.revokeObjectURL(dom.href);
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        handleSizeChange(val) {
            //当每页数据改变时
            this.query.pageSize = val;
            this.loadUsers();
        },
        handleCurrentChange(val) {
            //当点击页码时
            this.query.currentPage = val;
            this.loadUsers();
        },
        loadProduct() {
            this.$axios.get("/products/selectAll").then((res) => {
                this.productList = res.data.data.product;
            });
        },
        selByLike() {
            this.$axios.post("/products/query", this.selLike).then((res) => {
                this.productList = res.data.data.product;
            });
        },
        handleEdit(productId, productAudit) {
            this.$axios.put("/products/audit", {
                productId: productId,
                productAudit: productAudit
            }).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '该产品已通过审核！',
                        type: 'success'
                    });
                    this.loadProduct();
                } else {
                    this.$message({
                        message: '只能审核状态为未审核的产品！',
                        type: 'error'
                    });
                }
            });
        },
        selTemplate(productId) {
            this.dialog2.updateshow2 = true;
            this.$axios.get("/contractTemplate/" + productId).then((res) => {
                this.updateT = res.data.data.contractTemplate;
            })
        },
        updateTemplate() {
            this.$axios.put("/contractTemplate/update", this.updateT).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '合同模板修改成功！',
                        type: 'success'
                    });
                    this.loadProduct();
                    this.dialog2.updateshow2 = false
                } else {
                    this.$message({
                        message: '请重试！',
                        type: 'error'
                    });
                }
            });
        },
        deleteEdit(productId, productAudit) {
            if (productAudit == 1) {
                this.dialog.updateshow = true;
                this.$axios.get("/products/" + productId).then((res) => {
                    this.updateC = res.data.data.product;
                })
            }
        },
        updateCC() {
            this.$axios.put("/products/audit2", this.updateC).then((res) => {
                if (res.data.code == 200) {
                    this.$message({
                        message: '该产品未通过审核，已提交反馈意见！',
                        type: 'warning'
                    });
                    this.dialog.updateshow = false;
                    this.loadProduct();
                } else {
                    this.$message({
                        message: '只能审核状态为未审核的产品！',
                        type: 'error'
                    });
                }
            });
        }
    },

    mounted() {
        this.loadProduct();
    }
};
</script>

<style>
.el-table .warning-row {
    background: oldlace;
}

.el-table .success-row {
    background: #f0f9eb;
}
</style>